{block name="style"}
<style>
.shape-main {
    width: calc(100% /5);height: 50px;float: left;margin: 10px 0;
}
.shape-top {
    width: 100%;height: 15px
}
.shape-line {
    width: calc(100%/2 - 15px);height: 2px;background: #008aff;float: left;margin-top: 5px;
}
.shape-radius {
    width:14px;height:14px;background: #008aff;margin: 0 8px;float: left;border-radius: 50%
}
.shape-text {
    text-align: center; height: 20px; line-height: 20px;
}
.layui-table td .layui-table-cell {
    height: auto !important;
    overflow: visible;
    text-overflow: inherit;
    white-space: normal;
    word-break: break-all;
}
.layui-table td .layui-table-grrid-down{
    display: none;
}
</style>
{/block}
<div class="layui-tab layui-tab-card">
    <div class="layui-tab-content" style="background-color: #F0F2F5;">

            <div class="layui-card">
                <div class="layui-card-header">订单状态</div>
                <div class="layui-card-body" style="height: 90px">
                    {if !empty($progress_status_arr) }
                    {assign name="p_count" value="0" /}
                    {foreach $progress_status_arr as $key => $val }
                        <div class="shape-main" >
                            <div class="shape-top" >
                                <div class="shape-line" {if $p_count == 0} style="background: white" {/if}></div>
                                <div class="shape-radius" ></div>
                                {if (count($progress_status_arr) >1) && ($p_count == (count($progress_status_arr)-1))}
                                <div class="shape-line" style="background: white" ></div>
                                {else}
                                <div class="shape-line" ></div>
                                {/if}
                            </div>
                            <div  class="shape-text" >
                                {$val|default=''}
                            </div>
                        </div>
                        {assign name="p_count" value="$p_count+1" /}
                    {/foreach}
                    {/if}
                </div>

            </div>

            <div class="layui-card">
                <div class="layui-card-header">
                    基本信息 (订单号：{$vo.order_no|default=''})
                    <!--{if auth("editPurchaseOrder")}-->
                    {if !empty($is_edit) }
                    <div class="" style="float:right"><a href="javascript:;" data-modal="{:sysuri('editPurchaseOrder')}?order_id={$order_id}" data-title="{:lang('回填采购单号')}" class='layui-btn layui-btn-sm layui-btn-primary'>{:lang('回填采购单号')}</a></div>
                    {/if}
                    <!--{/if}-->
                </div>
                <div class="layui-card-body">
                    <div class="layui-row">
                        {if !empty($base_info) }
                        {foreach $base_info as $k => $v }
                        <div class="layui-col-md6">
                            <div class="layui-form-item layui-inline">
                                <label class="layui-form-label">{$v.title|default=''}:</label>
                                <label class="layui-form-label" style="text-align:left;padding-left: 0px;width: auto;">{$v.value|default=''}</label>
                            </div>
                        </div>
                        {/foreach}
                        {/if}
                    </div>
                </div>
            </div>

            <div class="layui-card">
                <div class="layui-card-header">
                    备注
                    <div class="remark-add" style="float:right"><a href="javascript:;" data-modal="{:sysuri('addRemark')}?order_id={$order_id}" data-title="{:lang('添加平台')}" class='layui-btn layui-btn-sm layui-btn-primary'>{:lang('添加备注')}</a></div>

                </div>
                <div class="layui-card-body remark">
                    <table class="layui-table">
                        <colgroup>
                            <col width="150">
                            <col width="150">
                            <col width="150">
                        </colgroup>
                        <thead>
                        <tr>
                            <th>操作时间</th>
                            <th>操作人</th>
                            <th>备注类型</th>
                            <th>备注内容</th>
                        </tr>
                        </thead>
                        <tbody class="remark-list">

                        </tbody>
                    </table>
                </div>
            </div>

            <div class="layui-card">
                <div class="layui-card-header">
                    交易信息
                </div>
                <div class="layui-card-body">
                    <div class="layui-card-header">
                        付款信息
                    </div>
                    <div class="layui-row">
                        {if !empty($payment_info) }
                        {foreach $payment_info as $k => $v }
                        <div class="layui-col-md6">
                            <div class="layui-form-item layui-inline">
                                <label class="layui-form-label">{$v.title|default=''}:</label>
                                <label class="layui-form-label" style="text-align:left;padding-left: 0px;width: auto;">{$v.value|default=''}</label>
                            </div>
                        </div>
                        {/foreach}
                        {/if}
                    </div>
                </div>
            </div>

            <div class="layui-card">
                <div class="layui-card-header">
                    原始地址
                </div>
                <div class="layui-card-body">
                    <div class="layui-row">
                        {if !empty($user_address) }
                        {foreach $user_address as $k => $v }
                        <div class="layui-col-md6">
                            <div class="layui-form-item layui-inline">
                                <label class="layui-form-label">{$v.title|default=''}:</label>
                                <label class="layui-form-label" style="text-align:left;padding-left: 0px;width: auto;">{$v.value|default=''}</label>
                            </div>
                        </div>
                        {/foreach}
                        {/if}
                    </div>
                </div>
            </div>

            <!-- <form action="{:sysuri()}" method="post" data-auto="true" class="layui-form layui-card" data-table-id="CollectGoods" style="background-color: #F0F2F5;">

            <div class="layui-card">
                <div class="layui-card-header">
                    收货地址
                    <div class="address-edit" style="float:right"><a href="javascript:;" onclick="editAddress()" data-title="{:lang('添加平台')}" class='layui-btn layui-btn-sm layui-btn-primary'>{:lang('修改地址')}</a></div>
                    <div class="address-submit" style="float:right; display:none"><a href="javascript:;" onclick="editAddressSubmit()" data-title="{:lang('添加平台')}" class='layui-btn layui-btn-sm layui-btn-primary'>{:lang('保存')}</a></div>
                </div>
                <div class="layui-card-body">
                    <div class="layui-form-item">
                        <label class="layui-form-label label-required-next">收件人：</label>
                        <div class="layui-input-block" >
                            <input type="text" name="user_name" placeholder="请输入" autocomplete="off" class="layui-input" value="{$vo.user_name|default=''}" disabled>
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <label class="layui-form-label label-required-next">电话/手机：</label>
                        <div class="layui-input-block" >
                            <input type="text" name="user_mobile" placeholder="请输入" autocomplete="off" class="layui-input" value="{$vo.user_mobile|default=''}" disabled>

                        </div>
                    </div>
                    <div class="layui-form-item">
                        <label class="layui-form-label label-required-next">国家/地区：</label>
                        <div class="layui-input-block" >
                            <input type="text" name="country" placeholder="请输入" autocomplete="off" class="layui-input" value="{$vo.country|default=''}" disabled>
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <label class="layui-form-label label-required-next">省/州：</label>
                        <div class="layui-input-block" >
                            <input type="text" name="user_region" placeholder="请输入" autocomplete="off" class="layui-input" value="{$vo.user_region|default=''}" disabled>
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <label class="layui-form-label label-required-next">城市：</label>
                        <div class="layui-input-block" >
                            <input type="text" name="user_city" placeholder="请输入" autocomplete="off" class="layui-input" value="{$vo.user_city|default=''}" disabled>
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <label class="layui-form-label label-required-next">区县：</label>
                        <div class="layui-input-block" >
                            <input type="text" name="user_district" placeholder="请输入" autocomplete="off" class="layui-input" value="{$vo.user_district|default=''}" disabled>
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <label class="layui-form-label label-required-next">邮编：</label>
                        <div class="layui-input-block">
                            <input type="text" name="zip_code" placeholder="请输入" autocomplete="off" class="layui-input" value="{$vo.zip_code|default=''}" disabled>
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <label class="layui-form-label label-required-next">详细地址：</label>
                        <div class="layui-input-block">
                            <input type="text" name="user_address_info" placeholder="请输入" autocomplete="off" class="layui-input" value="{$vo.user_address_info|default=''}"  disabled>
                        </div>
                    </div>
                </div>
            </div>
            </form> -->

            <div class="layui-card" style="margin-top: 10px;">
                <div class="layui-card-header">商品详情</div>
                <div class="layui-card-body">
                    <table id="OrderInfoList" data-url="{:sysuri('infoList')}"></table>
                </div>
            </div>
    </div>
</div>
{block name="script"}
<script>
    let is_edit = {$is_edit};
    let cols_config = [
        // {field: 'LAY_NUM', title: '{:lang("序号")}', width: 100, align: 'center', },
        {field: 'belong', title: '{:lang("图片")}',  align: 'center', minWidth: 100 ,templet:"#imgTpl"},
        {field: 'goods_info', title: '{:lang("产品信息")}', align: 'center', minWidth: 120 ,templet:"#goodsTpl"},
        {field: 'trade_info', title: '{:lang("交易信息")}', align: 'center', minWidth: 100 ,templet:"#tradeTpl"},
    ]
    $('#OrderInfoList').layTable({
        even: true, height: '500px',
        where: {order_id: '{$order_id|default="0"}'},
        cols: [cols_config]
        ,done: function(res, curr, count){
            //动态监听表头高度变化，冻结行跟着改变高度
            $(".layui-table-header tr").resize(function () {
                $(".layui-table-header  tr").each(function (index, val) {
                    $($(".layui-table-fixed .layui-table-header table tr")[index]).height($(val).height());
                });
            });
            //初始化高度，使得冻结行表头高度一致
            $(".layui-table-header tr").each(function (index, val) {
                $($(".layui-table-fixed .layui-table-header table tr")[index]).height($(val).height());
            });
            //动态监听表体高度变化，冻结行跟着改变高度
            $(".layui-table-body tr").resize(function () {
                $(".layui-table-body  tr").each(function (index, val) {
                    $($(".layui-table-fixed .layui-table-body table tr")[index]).height($(val).height());
                });
            });
            //初始化高度，使得冻结行表体高度一致
            $(".layui-table-body tr").each(function (index, val) {
                $($(".layui-table-fixed .layui-table-body table tr")[index]).height($(val).height());
            })
        }
    });

    // 单元格编辑事件
    // layui.table.on('edit(OrderInfoList)', function(obj){

    //     let field = obj.field; // 得到修改的字段
    //     let value = obj.value; // 得到修改后的值
    //     let data = obj.data; // 得到所在行所有键值
    //     let oldValue = obj.oldValue; // 得到修改前的值 -- v2.8.0 新增

    //     // 值的校验
    //     if(!isNotEmpty(value)){
    //         let title = ''
    //         if(field == 'other_order_no'){
    //             title = '绑定系统订单号'
    //         }
    //         $.msg.error('请填写'+title);
    //         return obj.reedit(); // 重新编辑 -- v2.8.0 新增
    //     }

    //     $.ajax({
    //         url: "{:sysuri('editData')}",
    //         type: 'POST',
    //         dataType: 'json',
    //         data: {id:data.id, value:value, field:field},
    //         success: function(res){
    //             // console.log(data);
    //             if(res.code == 0){
    //                 $.msg.error(res.info, null, function(){
    //                     return obj.reedit();
    //                 });
    //             }else{
    //                 $.msg.success(res.info, null, function() {
    //                     // 其他更新操作
    //                     let update = {};
    //                     update[field] = value;
    //                     obj.update(update);
    //                 });
    //             }
    //         },
    //         error: function(err){
    //             $.msg.error(err.status+err.statusText);
    //         }
    //     })

    //     //console.log(obj); // 查看对象所有成员


    //     // 编辑后续操作，如提交更新请求，以完成真实的数据更新
    //     // …

    //      // 参数 true 为 v2.7 新增功能，即同步更新其他包含自定义模板并可能存在关联的列视图
    // });

    /**
     * 编辑购买地址
     *
     */
    function editAddress()
    {

        $('form').find('input').attr('disabled', false);
        $('form').find('.layui-card-header').find('div').toggle();
    }
    /**
     * 提交修改地址
     *
     */
    function editAddressSubmit()
    {

        $('form').find('input').attr('disabled', true);
        $('form').find('.layui-card-header').find('div').toggle();

        let user_name       = $('form').find('input[name=user_name]').val();
        let user_mobile     = $('form').find('input[name=user_mobile]').val();
        let user_address    = $('form').find('input[name=user_address]').val();
        let user_address_info = $('form').find('input[name=user_address_info]').val();

        $.ajax({
            url: "{:sysuri('addressEdit')}",
            type: 'POST',
            dataType: 'json',
            data: {user_name:user_name, user_mobile:user_mobile, user_address:user_address, user_address_info:user_address_info},
            success: function(res){
                // console.log(data);
                if(res.code == 0){
                    layer.msg(res.info, {icon: 1,time: 1000},function(){
                        // 更新当前缓存数据

                    })
                }
            },
            error: function(err){
                layer.msg(err.status+err.statusText);
            }
        })
    }
</script>
<!--图片-->
<script type="text/html" id="imgTpl" >
    <img src="{{ d.main_pic }}" class="preview-all" style="max-width: 80px;max-height: 80px;" data-tips-image data-tips-hover >
</script>
<!--商品-->
<script type="text/html" id="goodsTpl" >
    <div>
        <span>{{ d.goods_name }}</span><br>
        <span>平台SKU:{{ d.goods_nu }}</span><br>
        <span>产品规格:{{ d.attr_title }}</span><br>
        <span>本地SPU:<a href="{{ d.goods_url }}" target="_blank">{{ d.goods_spu }}</a></span>
    </div>
</script>
<!--交易-->
<script type="text/html" id="tradeTpl" >
    <div>
        <span>单价:{{ d.price_str }}</span><br>
        <span>数量:{{ d.num }}</span><br>
        <span>总价:{{ d.all_price_str }}</span>
    </div>
</script>
{/block}